<template>
  <div>
    <div class="header-fixed">
      <Header :text="text"/>
    </div>
    <div class="content">
      <!--
      <el-button plain class="btn" @click="handle"><van-icon name="scan" style="font-size: 20px" /><span style="margin-left:5px">开始扫描</span></el-button>
      -->
      <el-button plain class="btn" @click="handleHand"><i class="el-icon-edit"></i><span>{{$t('btn.handleEntry')}}</span></el-button>
    </div>
    <!-- 手动输入 -->
    <van-dialog v-if="show" v-model="show" :title="$t('m.iPlease')" :beforeClose="handleConfirm" show-cancel-button>
      <el-input :placeholder="$t('m.iPlease')" style="padding:10px" v-model="shipmentInput"/>
    </van-dialog>
  </div>
</template>

<script>
import Header from '../../components/common/Header'
import { Notify } from 'vant'
import {$import} from "@/api/import";
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
    Header
  },
  data() {
    return {
      text: '',
      show: false,
      isShow: false,
      shipmentInput: '' // 装箱单号
    }
  },
  methods: {
    handleHand() {
      this.show = !this.show
    },
    // 点击确认送货单号
    handleConfirm(action,done) {
      if (action === 'confirm') {
        if (this.shipmentInput === '') {
          done()
          this.show = false
          this.shipmentInput = ''
          return Notify({
            message: `${this.$t('message.iNoNull')}`,
            duration: 1000
          })
        }
        else {
          const obj = {
            delivererNumber: this.shipmentInput
          }
          this.getDetail(obj,done)
        }
      } else {
        this.shipmentInput = ''
        done()
      }
    },
    // 关闭详情
    handleCancel() {
      this.isShow = false
    },
    // 扫描
    handle() {
      var FNScanner = api.require('FNScanner')
      FNScanner.openScanner({
        autoration: true
      },(ret, err) => {
        // 扫描成功
        if (ret.eventType == 'success') {
          const obj = JSON.parse(ret.content)
          const newObj = {
            delivererNumber: obj.delivererNumber
          }
          if (newObj && newObj.delivererNumber) {
            this.getDetail(newObj)
          }
          else {
            return this.$msg.fail('无效的二维码')
          }
        }
        else {
          console.log(err)
        }
      })
    },
    // 获取详情
    getDetail(obj,done) {
      $import.getPutStorage(obj)
          .then(res => {
            if (res.status === 200) {
              this.$router.push({
                path: '/import/HandoverDetail',
                query: {
                  type: `${this.$t('cImport.iDelivery')}`,
                  handObj: res.data
                }
              })
            }
            else {
              done ? done() : ''
              this.$msg.fail(res.msg || res.message || '网络错误,请稍后再试')
            }
          })
          .catch(err => {
            done ? done() : ''
            this.$msg.fail(err.message || err.msg || '网络错误,请稍后再试')
          })
    }
  },
  created() {
    this.text = this.$t(this.$route.query.type)
  }
}
</script>

<style scoped>
.content {
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/deep/.el-button span{
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-button {
  margin: 10px 0;
}
/deep/.el-input {
  box-sizing: border-box;
}
</style>
